<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Shepherd — Guide your users through a tour of your app.</title>
  <meta name="description" content="Guide your users through a tour of your app.">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <!--favicons-->

  <link rel="apple-touch-icon" sizes="180x180" href="landing/assets/favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="landing/assets/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="landing/assets/favicons/favicon-16x16.png">
  <link rel="manifest" href="landing/assets/favicons/site.webmanifest">

  <!-- Welcome docs styles -->
  <link rel="stylesheet" href="dist/css/shepherd.css"/>
  <link rel="stylesheet" href="landing/css/fonts.css"/>
  <link rel="stylesheet" href="landing/css/prism.css"/>
  <link rel="stylesheet" href="landing/css/welcome.css"/>

  <script src="landing/js/svg-inject.min.js"></script>
</head>

<body class="bg-white font-body p-4 text-navy">
<header class="flex justify-center mt-4 w-full">
  <img
    class="shepherd-logo absolute ml-2"
    src="landing/assets/img/shepherd-head.svg"
    onload="SVGInject(this)"
  />

  <div class="bg-grey-light flex flex-col font-heading max-w-8xl justify-center items-center w-full">
    <nav class="flex justify-center p-4 mt-40 text-xl w-full lg:justify-between lg:mt-0">
      <div class="flex lg:p-12">
        <a
          class="pr-6 uppercase hover:text-navy-light lg:pr-10"
          href="/">
          Demo
        </a>
        <a
          class="pr-6 uppercase lg:pr-0 hover:text-navy-light lg:pr-10"
          href="https://shepherdjs.dev/docs/">
          Docs
        </a>
      </div>

      <div class="flex lg:p-12">
        <a
          class="pr-6 uppercase hover:text-navy-light lg:pr-10"
          href="https://github.com/shipshapecode/shepherd">
          GitHub
        </a>
        <a
          class="uppercase hover:text-navy-light"
          href="https://shipshape.io/contact/">
          Contact
        </a>
      </div>
    </nav>

    <img
      class="hero-welcome p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
      src="landing/assets/img/shepherd-header.svg"
      alt="Shepherd"
      onload="SVGInject(this)"
    />

    <h2 class="font-body p-2 text-xl">Guide your users through a tour of your app.</h2>

    <div class="flex justify-center w-full">
      <div class="flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap">
        <div class="m-4 relative w-full lg:w-1/3">
          <div class="border-4 border-navy w-full">
            <img
              class="absolute a11y-icon z-20"
              src="landing/assets/img/accessibility.svg"
              alt=""
              role="presentation"
              onload="SVGInject(this)"
            />

            <div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10">
            </div>

            <div class="bg-white h-72 p-6 relative z-10">
              <h3 class="p-2 text-2xl text-center uppercase w-full">
                Accessibility
              </h3>

              <p class="font-body p-2 text-xl">
                Shepherd has full keyboard navigation support, focus trapping,
                and a11y compliance via aria attributes.
              </p>
            </div>

            <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
            </div>
          </div>
        </div>

        <div class="m-4 relative w-full lg:w-1/3">
          <div class="border-4 border-navy w-full">
            <img
              class="absolute customizable-icon z-20"
              src="landing/assets/img/customizable.svg"
              alt=""
              role="presentation"
              onload="SVGInject(this)"
            />

            <div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10">
            </div>

            <div class="bg-white h-72 p-6 relative z-10">
              <h3 class="p-2 text-2xl text-center uppercase w-full">
                Highly Customizable
              </h3>

              <p class="font-body p-2 text-xl">
                Shepherd's styles are kept minimal, allowing you to easily
                customize the look and feel, but still give you enough to
                drop in and be ready to go quickly.
              </p>
            </div>

            <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
            </div>
          </div>
        </div>

        <div class="m-4 relative w-full lg:w-1/3">
          <div class="border-4 border-navy w-full">
            <img
              class="absolute framework-icon z-20"
              src="landing/assets/img/framework.svg"
              alt=""
              role="presentation"
              onload="SVGInject(this)"
            />

            <div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10">
            </div>

            <div class="bg-white h-72 p-6 relative z-10">
              <h3 class="p-2 text-2xl text-center uppercase w-full">
                Framework Ready
              </h3>

              <p class="font-body p-2 text-xl">
                Shepherd is ready to drop into your application using React, Ember,
                Angular, Vue.js, ES Modules, or plain Javascript!
              </p>
            </div>

            <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<main>
  <div class="font-heading mt-8 text-6xl text-center uppercase w-full">
    <img
      class="inline p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
      src="landing/assets/img/demo.svg"
      alt="Demo"
      onload="SVGInject(this)"
    />
  </div>
  <div class="flex justify-center w-full">
    <div class="max-w-3xl text-center w-full">
      <div class="hero-including mt-8">
        <h3 class="demo-heading font-heading text-2xl uppercase">01. How to Include</h3>

        <script type="text/plain" class="language-markup" id="hero-including-code">
          <link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
          <script src="shepherd.js/dist/js/shepherd.min.js">&lt;/script>




        </script>
      </div>

      <div class="hero-example mt-8">
        <h3 class="demo-heading font-heading text-2xl uppercase">02. Example</h3>

        <pre id="hero-example-code">
          <code class="language-javascript">
            const tour = new Shepherd.Tour({
              defaultStepOptions: {
                cancelIcon: {
                  enabled: true
                },
                classes: 'class-1 class-2',
                scrollTo: { behavior: 'smooth', block: 'center' }
              }
            });

            tour.addStep({
              title: 'Creating a Shepherd Tour',
              text: `Creating a Shepherd tour is easy. too!\
              Just create a \`Tour\` instance, and add as many steps as you want.`,
              attachTo: {
                element: '.hero-example',
                on: 'bottom'
              },
              buttons: [
                {
                  action() {
                    return this.back();
                  },
                  classes: 'shepherd-button-secondary',
                  text: 'Back'
                },
                {
                  action() {
                    return this.next();
                  },
                  text: 'Next'
                }
              ],
              id: 'creating'
            });

            tour.start();
          </code>
        </pre>
      </div>

      <div class="hero-followup font-heading mb-12 mt-12 lg:mb-24 lg:mt-24">
        <div class="bg-navy inline-block mb-4 w-56 lg:mr-4">
          <a
            class="button star bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full"
            href="https://github.com/shipshapecode/shepherd">
            ★ on Github
          </a>
        </div>

        <div class="bg-navy inline-block mb-4 w-56">
          <a
            class="button bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full"
            href="https://shepherdjs.dev/docs/"
          >
            View Docs
          </a>
        </div>
      </div>

      <div class="mb-12 mt-8">
        <h3 class="font-heading text-2xl uppercase">
          Brands that use Shepherd
        </h3>

        <div class="flex flex-wrap justify-center w-full">
          <div class="flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56">
            <div class="bg-white border-4 border-navy flex items-center justify-center h-full p-6 w-full z-10 md:p-12">
              <img
                class="h-auto w-full"
                src="landing/assets/users/ally.svg"
                alt=""
                role="presentation"
                onload="SVGInject(this)"
              />
            </div>

            <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
            </div>
          </div>

          <div class="flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56">
            <div class="bg-white border-4 border-navy flex items-center justify-center h-full p-4 w-full z-10 md:p-8">
              <img
                class="h-auto w-full"
                src="landing/assets/users/google.svg"
                alt=""
                role="presentation"
                onload="SVGInject(this)"
              />
            </div>

            <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
            </div>
          </div>

          <div class="flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56">
            <div class="bg-white border-4 border-navy flex items-center justify-center h-full p-4 w-full z-10 md:p-8">
              <img
                class="h-auto w-full"
                src="landing/assets/users/bonsai.png"
                alt=""
                role="presentation"
              />
            </div>

            <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<footer class="flex justify-center mt-10 w-full">
  <img
    class="footer-logo absolute w-48"
    src="landing/assets/img/shepherd-head-wink.svg"
    alt=""
    role="presentation"
    onload="SVGInject(this)"
  />

  <div class="bg-grey border-4 border-navy flex flex-wrap items-center justify-center md:justify-between max-w-8xl p-8 pt-20 w-full md:pt-8">
    <div class="flex items-center justify-center w-full md:justify-between md:w-auto">
      <img
        class="inline mr-2 w-8"
        src="landing/assets/img/ship-shape-logo.svg"
        alt="Ship Shape Logo"
        onload="SVGInject(this)"
      />

      <span class="font-heading text-xl uppercase">
        Library by <a class="underline hover:text-navy-light" href="https://shipshape.io">Ship Shape</a>
      </span>
    </div>

    <div class="flex items-center">
      <a href="https://github.com/shipshapecode">
        <img
          class="footer-icon mr-4 w-6"
          src="landing/assets/img/github.svg"
          alt="GitHub Logo"
          onload="SVGInject(this)"
        />
      </a>

      <a href="https://twitter.com/shipshapecode">
        <img
          class="footer-icon mr-4 w-6"
          src="landing/assets/img/twitter.svg"
          alt="Twitter Logo"
          onload="SVGInject(this)"
        />
      </a>

      <a href="https://www.linkedin.com/company/ship-shape/">
        <img
          class="footer-icon mr-4 w-6"
          src="landing/assets/img/linkedin.svg"
          alt="LinkedIn Logo"
          onload="SVGInject(this)"
        />
      </a>
    </div>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.2.10/webcomponents-bundle.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CSymbol%2CElement.prototype.matches"></script>
<!-- Shepherd -->
<script src="dist/js/shepherd.js"></script>

<!-- Welcome page -->
<script src="landing/js/prism.js"></script>
<script src="landing/js/welcome.js"></script>
</body>
</html>
